<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2025 by anonymous (http://jsbin.com/guvojifiya/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>李梓萌小朋友生日快乐</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #EEDDF9 0%, #8FC9BD 100%);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            touch-action: manipulation;
            cursor: pointer;
        }
        
        /* 黄色五角流星 */
        .shooting-star {
            position: absolute;
            color: #FFD700;
            font-size: 16px;
            animation: meteor-fall linear infinite;
            pointer-events: none;
            z-index: 1;
            filter: drop-shadow(0 0 3px yellow);
        }
        
        @keyframes meteor-fall {
            0% {
                transform: translate(-150px, -150px) rotate(-30deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% {
                transform: translate(600px, 600px) rotate(-30deg);
                opacity: 0;
            }
        }
        
        /* 蛋糕容器 */
        .cake-container {
            position: relative;
            width: 260px;
            height: 221.34px;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: center center;
            z-index: 10;
        }
        
        /* 三层蛋糕（精确1mm间距 ≈ 3.78px） */
        .cake-layer {
            position: absolute;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            border: 2px solid white;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .layer-top {
            width: 140px;
            height: 50px;
            top: 0;
            background: linear-gradient(to bottom, #5d3fd3, #7f5af0);
            z-index: 3;
        }
        
        .layer-middle {
            width: 180px;
            height: 70px;
            top: 53.78px;
            background: linear-gradient(to bottom, #d8a7ff, #ff9ff3);
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5px 0;
        }
        
        .layer-bottom {
            width: 220px;
            height: 90px;
            top: 127.56px;
            background: linear-gradient(to bottom, #f9e79f, #f7dc6f);
            z-index: 1;
        }
        
        /* 单根中央蜡烛 */
        .candle {
            position: absolute;
            width: 8px;
            height: 30px;
            background: linear-gradient(to bottom, #fff, #f3e5f5);
            z-index: 5;
            border-radius: 3px;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* 动态火焰效果 */
        .flame {
            position: absolute;
            width: 12px;
            height: 20px;
            background: radial-gradient(circle, #ffff00, #ff6600);
            border-radius: 50% 50% 20% 20%;
            filter: blur(3px);
            animation: 
                flicker 0.8s infinite alternate,
                flame-color 2s infinite alternate;
            z-index: 6;
            top: -20px;
            left: -2px;
        }
        
        @keyframes flicker {
            0%, 100% { transform: scale(1) rotate(-5deg); }
            25% { transform: scale(1.1, 0.9) rotate(5deg); }
            50% { transform: scale(0.9, 1.2) rotate(-3deg); }
            75% { transform: scale(1.05, 0.95) rotate(2deg); }
        }
        
        @keyframes flame-color {
            0% { box-shadow: 0 0 10px #ff6600; }
            50% { box-shadow: 0 0 15px #ffcc00; }
            100% { box-shadow: 0 0 10px #ff3300; }
        }
        
        /* 蛋糕中文字 */
        .cake-message {
            color: white;
            font-size: 22px;
            font-weight: bold;
            text-shadow: 0 2px 5px rgba(0,0,0,0.5);
            line-height: 1.3;
            text-align: center;
            transition: inherit;
        }
        
        .message-line {
            display: block;
            width: 100%;
            text-align: center;
        }
        
        /* 小蛋糕爆炸效果 */
        .mini-cake {
            position: absolute;
            width: 40px;
            height: 40px;
            background: linear-gradient(to bottom, #d8a7ff, #ff9ff3);
            border-radius: 8px;
            border: 1px solid white;
            z-index: 20;
            pointer-events: none;
            animation: cake-explode 1.5s forwards;
        }
        
        @keyframes cake-explode {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0.2);
                opacity: 0;
            }
        }
        
        /* 生日图片弹窗 */
        .birthday-image {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 80%;
            max-height: 80%;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border-radius: 10px;
            pointer-events: none;
        }
        
        .birthday-image.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .image-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
        }
        
        .image-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .close-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            z-index: 1001;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            cursor: pointer;
        }
        
        .image-overlay.show ~ .close-btn {
            opacity: 1;
            pointer-events: auto;
        }
    </style>
</head>
<body>
    <div class="cake-container" id="mainCake">
        <!-- 三层蛋糕 -->
        <div class="cake-layer layer-top"></div>
        <div class="cake-layer layer-middle">
            <div class="cake-message">
                <span class="message-line">祝李梓萌小朋友</span>
                <span class="message-line">生日快乐！</span>
            </div>
        </div>
        <div class="cake-layer layer-bottom"></div>
        
        <!-- 单根中央蜡烛 -->
        <div class="candle">
            <div class="flame"></div>
        </div>
    </div>
    
    <!-- 图片弹窗元素 -->
    <div class="image-overlay" id="imageOverlay"></div>
    <img class="birthday-image" id="birthdayImage" src="E:\软件路\浏览器\微信图片_20250423032300_37.jpg" alt="生日祝福">
    <div class="close-btn" id="closeBtn">×</div>
    
    <!-- 音频 -->
    <audio id="bgMusic" loop>
        <source src="https://music.163.com/song/media/outer/url?id=28188171.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 创建流星
        function createShootingStars() {
            // 初始创建50颗流星
            for (let i = 0; i < 50; i++) {
                createStar();
            }
            // 持续每100ms创建新流星
            setInterval(createStar, 100);
        }
        
        function createStar() {
            const star = document.createElement('div');
            star.className = 'shooting-star';
            star.innerHTML = '★';
            
            star.style.left = `${Math.random() * 150}vw`;
            star.style.top = `${Math.random() * 100}vh`;
            star.style.animationDuration = `${Math.random() * 3 + 2}s`;
            star.style.fontSize = `${Math.random() * 12 + 14}px`;
            star.style.opacity = '0';
            
            document.body.appendChild(star);
            setTimeout(() => star.remove(), 5000);
        }
        
        // 创建蛋糕爆炸效果
        function explodeCake() {
            const cake = document.getElementById('mainCake');
            const rect = cake.getBoundingClientRect();
            const centerX = rect.left + rect.width/2;
            const centerY = rect.top + rect.height/2;
            
            // 隐藏主蛋糕
            cake.style.opacity = '0';
            
            // 创建30个小蛋糕碎片
            for (let i = 0; i < 30; i++) {
                const miniCake = document.createElement('div');
                miniCake.className = 'mini-cake';
                miniCake.style.left = `${centerX}px`;
                miniCake.style.top = `${centerY}px`;
                
                // 随机方向和距离
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 300 + 100;
                miniCake.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
                miniCake.style.setProperty('--ty', `${Math.sin(angle) * distance}px`);
                
                // 随机颜色
                const colors = [
                    'linear-gradient(to bottom, #5d3fd3, #7f5af0)',
                    'linear-gradient(to bottom, #d8a7ff, #ff9ff3)',
                    'linear-gradient(to bottom, #f9e79f, #f7dc6f)'
                ];
                miniCake.style.background = colors[Math.floor(Math.random() * colors.length)];
                
                // 随机大小
                const size = Math.random() * 30 + 20;
                miniCake.style.width = `${size}px`;
                miniCake.style.height = `${size}px`;
                
                document.body.appendChild(miniCake);
                
                // 移除小蛋糕
                setTimeout(() => {
                    miniCake.remove();
                    // 所有碎片消失后恢复主蛋糕
                    if (i === 29) {
                        setTimeout(() => {
                            cake.style.opacity = '1';
                        }, 300);
                    }
                }, 1500);
            }
        }
        
        // 显示生日图片
        function showBirthdayImage() {
            document.getElementById('imageOverlay').classList.add('show');
            document.getElementById('birthdayImage').classList.add('show');
            document.getElementById('bgMusic').pause();
        }
        
        // 隐藏生日图片
        function hideBirthdayImage() {
            document.getElementById('imageOverlay').classList.remove('show');
            document.getElementById('birthdayImage').classList.remove('show');
            document.getElementById('bgMusic').play();
        }
        
        // 重置所有状态
        function resetAll() {
            const cake = document.getElementById('mainCake');
            cake.style.opacity = '1';
            cake.style.transform = 'scale(1)';
            hideBirthdayImage();
        }
        
        // 初始化
        window.onload = function() {
            createShootingStars();
            
            let clickCount = 0;
            const cake = document.getElementById('mainCake');
            const closeBtn = document.getElementById('closeBtn');
            
            // 点击关闭按钮
            closeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                resetAll();
                clickCount = 0;
            });
            
            // 点击遮罩层
            document.getElementById('imageOverlay').addEventListener('click', resetAll);
            
            // 主点击事件
            document.body.addEventListener('click', function(e) {
                // 如果图片正在显示，则忽略点击
                if (document.getElementById('imageOverlay').classList.contains('show')) {
                    return;
                }
                
                clickCount++;
                
                if (clickCount <= 3) {
                    // 前3次点击逐渐放大 (1 → 1.5 → 2 → 2.5)
                    cake.style.transform = `scale(${1 + clickCount * 0.5})`;
                } else if (clickCount === 4) {
                    // 第4次点击爆炸效果
                    explodeCake();
                } else if (clickCount === 5) {
                    // 第5次点击显示图片
                    showBirthdayImage();
                } else {
                    // 第6次点击重置
                    clickCount = 0;
                    resetAll();
                }
            });
        };
    </script>
</body>
</html>